<!--
    Scada-LTS - Open Source M2M - http://mango.serotoninsoftware.com
    Copyright (C) 2006-2011 Serotonin Software Technologies Inc.
    @auteur Matthew Lohbihler
    
    Ce programme est un logiciel libre : vous pouvez le redistribuer et/ou le modifier
    aux termes de la licence publique générale GNU telle que publiée par
    la Free Software Foundation, soit la version 3 de la licence, ou
    (à votre choix) toute version ultérieure.

    Ce programme est distribué dans l'espoir qu'il sera utile,
    mais SANS AUCUNE GARANTIE ; sans même la garantie implicite de
    la qualité marchande ou l'adéquation à un usage particulier.  Voir le
    Licence publique générale GNU pour plus de détails.

    Vous devriez avoir reçu une copie de la licence publique générale de GNU
    en même temps que ce programme.  Si ce n'est pas le cas, voir http://www.gnu.org/licenses/.
 -->
<h1>Aperçu</h1>
<p>
  Tous les attributs d'une vue graphique et de ses points associés sont modifiables dans la page édition de la vue graphique. Les vues contiennent une bibliothèque de <b>composants de vues</b>, qui peuvent être statiques ou dynamiques basés sur un ou plusieurs points.
</p>

<h1>Attributs des vues graphiques</h1>
<p>
  Toutes les vues sont référencées par un nom qui apparait dans la liste déroulante. Ce nom devrait être unique même si ce n'est pas obligatoire. Une vue peut avoir éventuellement une <b>Image de fond</b> sur laquelle seront superposés ses composants. N'importe quel type d'image peut servir d'image de fond, y compris les formats GIF, JPEG, et PNG. L'option <b>Acces anonyme</b> permet aux utilisateurs non identifiés d'accèder Ó la vue. L'option <b>Définir</b> signifie que les utilisateurs anonymes peuvent définir les valeur règlables des points de la vue. <b>Lecture</b> signifie que les utilisateurs anonymes peuvent accéder à la vue mais pas modifier les valeurs. <b>Aucun</b> interdit l'accès aux utilisateurs anonymes.
</p>

<h1>Composants de la vue</h1>
<p>
 Des composants peuvent être ajoutés à la vue, sélectionnez un composant dans la liste et cliquez sur l'icône <img src="images/plugin_add.png"/>. Par défaut les nouveaux composant sont placés au centre de la vue, mais peuvent être déplacés par un glisser-déposer, n'importe ou à l'intérieur des limites de l'arrière plan. Notez que les points ajoutés peuvent se superposés. Lors de l'édition de la vue, les composants sont écrits dans l'ordre dans lequel ils sont définis. En cas de superposition de composants le comportement de ces chevauchements peut en être affecté.
</p>

<h1>Contenu statique</h1>
<p>
  Sélectionnez le composant <b>HTML</b> pour ajouter un contenu statique. Par défaut l'icône <img src="images/html_add.png"/> représente le contenu. (Cette icône est utilisée tant que le contenu n'est pas défini.) Ces composants sont indépendants des valeurs des points, ils apparaissent au chargement de la page et ne changent plus. Glissez l'élément à l'emplacement désiré. Pour l'éditer, placez le curseur sur l'élément et affichez les contrôles d'édition. Pour le modifier, cliquez sur l'icône <img src="images/pencil.png"/>) et entrez du code html valide. Le contenu sera intégralement repris dans la vue,
  ainsi tout code HTML valide (y compris du code Javascript) peut être utilisé. Vous pouvez définir des styles directement ou utiliser des classes de style CSS à partir de fichiers référencés. Par exemple, pour ajouter un label, les éléments suivant peuvent être employés:
</p>
<pre>
  &lt;span style="background-color:yellow;font-size:25px;font-weight:bold;border:2px solid orange;"&gt;Mon étiquette&lt;/span&gt;
</pre>
<p>
  Ceci affichera : <span style="background-color:yellow;font-size:25px;font-weight:bold;border:2px solid orange;">Mon étiquette</span>
</p>

<p>
  Le contenu statique peut aussi faire référence à d'autres serveurs. Par exemple, vous pouvez placez une image externe sur vos vues:
</p>
<pre>
  &lt;img src="http://bluebrain.epfl.ch/webdav/site/bluebrain/shared/21june_06_singleNeuron_200.jpg"/&gt;
</pre>
<p>
  Ceci affichera: <img src="http://bluebrain.epfl.ch/webdav/site/bluebrain/shared/21june_06_singleNeuron_200.jpg"/>
</p>

<h1>Composants de point</h1>
<p>
  L'affichage de tous les autres composants de la liste dépendent d'un ou plusieurs points. Une fois le composant ajouté dans la vue, il est représenté par défaut par l'icône générique (<img src="images/icon_comp.png"/>)jusqu'à ce que le composant est assez d'informations pour être affiché correctement. Ces informations dépendent du type de composant. En mode édition l'affichage de la vue est le même qu'en mode utilisation. Lors de sa création un point est affiché et mis à jour  ainsi l'utilisateur sait exactement comment apparaitra le point dans la vue.
</p>

<h1>traitement des composants du point</h1>
<p>
  On peut modifier l'affichage d'un composant en passant la souris sur le composant, cela affichera les commandes d'édition. En mode édition les contrôles affichés sont différents de ceux de la page vue sauf pour le contrôle de l'information (<img src="images/information.png"/>), qui affiche la valeur actuelle du point et l'heure de mise à jour.
</p>

<p>
  Les attributs d'un point de la vue peuvent être paramètrés en cliquant sur l'icône (<img src="images/plugin_edit.png"/>). Un panneau d'édition apparait, qui permet de remplacer les attributs du point dans la vue. Par exemple, on peut changer un point règlable en point non règlable dans la vue (l'inverse n'est pas vrai, un point non règlable ne peut devenir règlable). C'est aussi dans ce panneau que l'on va définir le(s) point(s) à afficher. Les points proposés dans la liste dérourantes dépendent du type du composant choisi.
</p>

<p>
  L'affichage d'un point peut être changé en cliquant sur l'icône (<img src="images/graphic.png"/>). Un panneau apparait, permettant de modifier l'affichage du point. Par exemple, le composant <b>GIF analogique</b> peut être utilisé pour visualiser la valeur numérique d'un point. Renseignez les valeurs <b>Min</b> et <b>Max</b>, les images seront uniformément réparties sur la plage numérique et affichées correctement. Un <b>GIF binaire</b> est disponible uniquement pour les points binaires, et affichera une des deux images disponibles suivant la valeur actuelle du point. Des gifs animés sont aussi applicables pour représenter l'état de fonctionnement d'un équipement (quand il marche ou pas). On peut ajouter un texte à la représentation d'un point en cochant l'option <b>Afficher texte</b>. 
  <b>Simple point</b> Affiche seulement le texte du point. 
</p>

<p>
  Le composant <b>GIF dynamique</b> est similaire au GIF analogique dans le sens qu'il peut afficher la valeur numérique d'un point, mais au lieu de choisir un ensemble d'images il dessine dynamiquement l'indicateur de la valeur. Par exemple, le pointeur peut être dessiné sur l'image unique d'une montre. Pour ajouter un élément dynamique, ajoutez un sous dossier dans le répertoire "graphics", dans ce nouveau dossier placez vos propres images et un fichier info.txt associé. Puis, ajoutez une fonction dans le fichier "/resources/view.js". Le nom de la fonction doit être celui du dossier précédemment créé. Consultez par exemple le GIF Dial. 
  
</p>

<p>
  <b>Script serveur</b> est utilisé pour définir vos propres logiques d'affichage. Le langage de script utilisé est JavaScript, aussi connu ECMAScript. (La spécification complète ECMAScript est disponible ici <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">ici</a>.) Cependant, il n'existe pas d'objets "window" ou "document" disponible puisque le script est interprété coté serveur et non dans le navigateur. Au lieu de cela, la valeur actuelle du point est disponible à travers la variable <b>value</b> , et le timestamp de l'échantillon via la variable <b>time</b>. En outre, les variables <b>pointComponent</b> et <b>point</b> sont aussi définies, avec des valeurs similaires à "htmlText" et "renderedText". Enfin "events" donne la liste des évènements actifs actuellement et "hasUnacknowledgdEvent" est une valeur booléenne indiquant si au moins un des évènements actifs n'est pas acquitté. 
</p>
<p>
  Toute valeur peut être renvoyée par le script et affichée simplement, mais il est plus intéressant d'insérer dans le script du code HTML. Par exemple, le script suivant affichera selon le cas un message clignotant lorsque la valeur du point est "1" (interprété par "true" par le script):
</p>
<pre>
  if (value)
      return '&lt;blink&gt;&lt;span style="background-color:orange;font-size:15px;font-weight:bold;"&gt;Warning: point is ON&lt;/span&gt;&lt;/blink&gt;';
  return "";
</pre>
<p>
  Notez,que sur la page d'édition si le script ne renvoit rien l'icône <img src='images/logo_icon.gif'/> sera affichée afin d'accéder aux contrôle du point (survol de la souris sur l'icône).
</p>

<p>
  Le timestamp de l'échantillon est donné en millisecondes avec le 1 janvier 1970 comme origine. Il peut être converti en objet Date ECMA avec le code suivant:
</p>
<pre>
  var d = new Date();
  d.setTime(time);
</pre>
<p>
  L'objet Date "d" peut être utilisé si necéssaire dans la suite du script.
</p>

<p>
  Les points de la vue peuvent être supprimés en cliquant sur l'icône (<img src="images/plugin_delete.png"/>), en survolant le point avec la souris.
</p>

<h1>Enregistrer une vue</h1>
<p>
  Tous les changements d'une vue sont sauvegardés uniquement avec la bouton <b>Enregistrer</b>. En cas de changement erronés sur la vue cliquez sur le bouton <b>Annuler</b>. Pour supprimer une vue cliquez sur le bouton <b>Supprimer</b>.
</p>
